<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算机属性和监视</title>
</head>
<body>
    <!--
        1.计算属性
        在computed属性对象中定义计算属性的方法
        在页面中使用{{方法名}}来显示计算的结果
        2.监视属性：
        通过VM对象的$watch()或watch配置来监视指定的属性
        当属性变化时回调函数自动调用，在函数内部进行计算
        3.计算属性高级：
        通过getter/setter实现对属性数据的监视和显示计算属性存在缓存， 
        多次读取只执行一次getter计算
        getter：对应属性的get方法
        setter： 对应属性的set方法
    -->
    <div id="demo">
         性：<input type="text" placeholder="First Name" v-model="firstName"><br>
         名：<input type="text" placeholder="Last Name" v-model="lastName"><br>
         姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"><br>
         姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"><br>
         姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"><br>
         <script src="../js/vue.js"></script>
         <script>
             const vm = new Vue({
                 el:'#demo',
                 data:{
                    firstName:'A',
                    lastName:'B',
                    // fullName:'AB'
                    fullName2:'A B'
                 },
                 //计算机属性
                 computed:{
                      //回调函数什么时候调用  用来做什么  计算并返回当前属性的值
                     //什么时候执行：初始化显示/相关的data属性数据发生改变
                     fullName1(){//计算属性中的一个方法，方法的返回值作为属性值
                         return this.firstName+ '  ' +this.lastName
                     },
                     //双向数据
                     fullName3:{
                         //回调函数必须满足三个条件1:你定义的 2:你没有调用3:但最终他执行了
                         //回调函数 计算并返回当前属性的值
                         get(){
                         return this.firstName+ '  ' +this.lastName
                         },
                         //回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
                         set(value){//value就是fullname3的最新属性值
                            const names = value.split(' ')
                            this.firstName=names[0]
                            this.lastName=names[1]

                         }
                     }
                 },
                 //监视
                 watch:{
                    firstName:function(value){//firstName发生来变化
                        console.log(this);//就是vm对象
                        this.fullName2 = value + '  ' + this.lastName
                    }
                 }
                 })
                 vm.$watch('lastName',function(value){
                     //更新FullName2
                    this.fullName2 = this.firstName + ' ' + value
             })
         </script>
    </div>
</body>
</html>